<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
    <p:panel>
        <h2>Step 2
            <small>Define Time Slots</small>
        </h2>
        <p:schedule id="scheduler" value="#{createLearningEventModel.scheduleModel}"
                    widgetVar="scheduleWidget"
                    firstHour="8" allDaySlot="false" timeFormat="HH:mm">

            <p:ajax event="dateSelect" listener="#{timeSlotCreateController.onDateSelect}" update="timeSlotPanel"
                    oncomplete="timeSlotDialogWidget.show()"/>

            <p:ajax event="eventSelect" listener="#{timeSlotCreateController.onEventSelect}" update="timeSlotPanel"
                    oncomplete="timeSlotDialogWidget.show()"/>

            <p:ajax event="eventMove" listener="#{timeSlotCreateController.onEventMove}"/>

            <p:ajax event="eventResize" listener="#{timeSlotCreateController.onEventResize}"/>
        </p:schedule>
    </p:panel>
    <p:dialog id="timeSlotDialog" widgetVar="timeSlotDialogWidget" header="Event Details" modal="true">
        <p:panel id="timeSlotPanel">
            <div class="control-group">
                <p:outputLabel for="pickedTimeStart" value="Start Time" styleClass="control-label"/>

                <div class="controls">
                    <p:calendar id="pickedTimeStart"
                                value="#{createTimeSlotModel.selectedTimeStart}"
                                pattern="HH:mm"
                                timeOnly="true" stepHour="1" stepMinute="15">
                        <p:ajax listener="#{timeSlotCreateController.startTimeAdjustedAction}"
                                update="pickedTimeEnd durationText applyTimeSlotBtn"/>
                    </p:calendar>
                </div>
            </div>

            <div class="control-group">
                <p:outputLabel for="pickedTimeEnd" value="End Time" styleClass="control-label"/>

                <div class="controls">
                    <p:calendar id="pickedTimeEnd" value="#{createTimeSlotModel.selectedTimeEnd}"
                                pattern="HH:mm" minHour=""
                                timeOnly="true" stepHour="1" stepMinute="15">
                        <p:ajax listener="#{timeSlotCreateController.endTimeAdjustedAction}"
                                update="pickedTimeStart durationText applyTimeSlotBtn"/>
                    </p:calendar>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Duration</label>

                <div class="controls">
                    <h:outputText id="durationText" value="#{createTimeSlotModel.timeDuration}"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Location Name</label>

                <div class="controls">
                    <p:autoComplete id="locationAutoComplete"
                                    minQueryLength="3"
                                    value="#{createTimeSlotModel.createTimeSlotData.locationName}"
                                    converter="#{timeSlotLocationDataAutcompleteConverter}"
                                    completeMethod="#{timeSlotCreateController.searchLocationsBySearchTermAction}"
                                    var="location"
                                    itemValue="#{location}"
                                    itemLabel="#{location}"
                                    forceSelection="false">
                        <p:ajax event="itemSelect"
                                update="locationPlace locationStreet locationAutoComplete"
                                listener="#{timeSlotCreateController.applySelectedLocationToNewTimeSlotData}"/>
                        <p:column>
                            <h:outputText
                                    value="#{location.name} | #{location.street} | #{location.place}"/>
                        </p:column>
                    </p:autoComplete>
                </div>
            </div>

            <div class="control-group">
                <p:outputLabel for="locationPlace" value="Location Place"
                               styleClass="control-label"/>

                <div class="controls">
                    <p:inputText id="locationPlace"
                                 value="#{createTimeSlotModel.createTimeSlotData.place}"/>
                </div>
            </div>

            <div class="control-group">
                <p:outputLabel for="locationStreet" value="Location Street"
                               styleClass="control-label"/>

                <div class="controls">
                    <p:inputText id="locationStreet"
                                 value="#{createTimeSlotModel.createTimeSlotData.street}"/>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <p:commandButton id="applyTimeSlotBtn"
                                     action="#{learningEventCreateController.applyTimeSlotForNewLearningEventAction}"
                                     value="Add TimeSlot To Learning Event"
                                     process="timeSlotPanel"
                                     onsuccess="scheduleWidget.update();timeSlotDialogWidget.hide();"/>
                </div>
            </div>
        </p:panel>
    </p:dialog>
</ui:composition>
</body>
</html>